<template>
  <div
    style="display: flex;height: 500px;width: 100%;align-items: center;justify-content: center;"
  >
    <chart ref="dschart" :options="polar" style="margin-top: 20px"></chart>
  </div>
</template>

<style></style>
<script>
import ECharts from "vue-echarts/components/ECharts.vue";
import "echarts/lib/chart/line";
import "echarts/lib/component/tooltip";

import "echarts/lib/component/polar";

import "echarts/lib/component/legend";
import "echarts/lib/component/title";
import "echarts/theme/dark";
import "echarts/lib/chart/bar";

import { getRequest } from "../utils/api";
export default {
  components: {
    chart: ECharts
  },
  mounted: function() {
    var _this = this;
    getRequest("/article/dataStatistics").then(
      resp => {
        if (resp.status == 200) {
          _this.$refs.dschart.options.xAxis.data = resp.data.categories;
          _this.$refs.dschart.options.series[0].data = resp.data.ds;
        } else {
          _this.$message({ type: "error", message: "数据加载失败!" });
        }
      },
      resp => {
        _this.$message({ type: "error", message: "数据加载失败!" });
      }
    );
  },
  methods: {},
  data: function() {
    return {
      polar: {
        title: {
          text: ""
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: "none"
            },
            dataView: {
              readOnly: false
            },
            magicType: {
              type: ["line", "bar"]
            },
            restore: {},
            saveAsImage: {}
          }
        },
        tooltip: {},
        legend: {
          data: ["pv"]
        },
        xAxis: {
          data: []
        },
        yAxis: {},
        series: [
          {
            name: "pv",
            type: "line",
            data: []
          }
        ],
        animationDuration: 3000
      }
    };
  }
};
</script>
